<!DOCTYPE html>
<html>
	<head>
		<link href="texasholdem.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
		function bg() {
			var canvas=document.getElementById("bg");
			var context=canvas.getContext("2d");
			context.beginPath();
			context.rect(0,0,2000,2000);
			context.fillStyle="teal";
			context.fill();
		}
		function laud() {
			var canvasLaud=document.getElementById("laud");
			var laud=canvasLaud.getContext("2d");
		 
			// define center of oval
			var centerX = 450;
			var centerY = 275;		 
			// define size of oval
			var laudHeight = 430;
			var laudWidth = 720;
		 
			var controlRectWidth = laudWidth  * 1.33;
		 
			laud.beginPath();
			laud.moveTo(centerX,centerY - laudHeight/2);
			// draw left side of oval
			laud.bezierCurveTo(centerX-controlRectWidth/2,centerY-laudHeight/2,
				centerX-controlRectWidth/2,centerY+laudHeight/2,
				centerX,centerY+laudHeight/2);
		 
			// draw right side of oval
			laud.bezierCurveTo(centerX+controlRectWidth/2,centerY+laudHeight/2,
				centerX+controlRectWidth/2,centerY-laudHeight/2,
				centerX,centerY-laudHeight/2);

			//DEFINE THE GRADIENT MAP FOR THE TABLE
			var grd=laud.createRadialGradient(450,275,10,450,275,450);
			grd.addColorStop(0,"#006600"); // green
			grd.addColorStop(1,"#003300"); // dark green
			laud.fillStyle=grd;
			laud.fill()	
			
			laud.lineWidth=15;
			laud.strokeStyle="#663300"; 
			laud.stroke();	
			laud.closePath();
			
		}
		function kaardid() {
			var canvas=document.getElementById("kaardid");
			var context=canvas.getContext("2d");
		 
			var width = 50;
			var height = 70;
		 
			context.beginPath();
			context.rect(300,235,width,height);
			context.rect(355,235,width,height);
			context.rect(410,235,width,height);
			context.rect(480,235,width,height);
			context.rect(550,235,width,height);
			
			context.rect(320,90,width,height);
			context.rect(371,90,width,height);
			
			context.rect(170,160,width,height);
			context.rect(221,160,width,height);
			
			context.rect(120,275,width,height);
			context.rect(171,275,width,height);
			
			context.rect(240,365,width,height);
			context.rect(291,365,width,height);
			
			context.rect(400,400,width,height);
			context.rect(451,400,width,height);
			
			context.rect(560,365,width,height);
			context.rect(611,365,width,height);
			
			context.rect(680,275,width,height);
			context.rect(731,275,width,height);
			
			context.rect(630,160,width,height);
			context.rect(681,160,width,height);
			
			context.rect(480,90,width,height);
			context.rect(531,90,width,height);
		 
			context.fillStyle="transparent";
			context.fill();
			context.lineWidth=1;
			context.strokeStyle="white"; 
			context.stroke();
		}
		function POT() {
			var canvas=document.getElementById("POT");
			var context=canvas.getContext("2d");
					 
			context.beginPath();
			context.moveTo(400,10);
			context.lineTo(500,10);
			context.arc(500,35,25,Math.PI*1.5,Math.PI*2,false);
			context.lineTo(525,45);
			context.arc(500,45,25,Math.PI*2,Math.PI*0.5,false);
			context.lineTo(400,70);
			context.arc(400,45,25,Math.PI*0.5,Math.PI*1,false);
			context.lineTo(375,35);
			context.arc(400,35,25,Math.PI*1,Math.PI*1.5,false);
			
			context.fillStyle="#FF6600";
			context.fill();
			context.lineWidth=5;
			context.strokeStyle="#663300";
			context.stroke();
		}
		function players() {
			var canvas=document.getElementById("players");
			var context=canvas.getContext("2d");
			
			context.beginPath();
			context.scale(1, 1);
			context.arc(290,55,35,Math.PI*2,Math.PI*0,true);
			context.moveTo(165,140);
			context.arc(130,140,35,Math.PI*2,Math.PI*0,true);
			context.moveTo(110,330);
			context.arc(75,330,35,Math.PI*2,Math.PI*0,true);
			context.moveTo(260,475);
			context.arc(225,475,35,Math.PI*2,Math.PI*0,true);
			context.moveTo(485,515);
			context.arc(450,515,35,Math.PI*2,Math.PI*0,true);
			context.moveTo(640,475);
			context.arc(675,475,35,Math.PI*3,Math.PI*1,true);
			context.moveTo(790,330);
			context.arc(825,330,35,Math.PI*3,Math.PI*1,true);
			context.moveTo(735,140);
			context.arc(770,140,35,Math.PI*3,Math.PI*1,true);
			context.moveTo(575,55);
			context.arc(610,55,35,Math.PI*3,Math.PI*1,true);
			context.fillStyle="#660000";
			context.fill();
			context.lineWidth=2;
			context.strokeStyle="black";
			context.stroke();
		}
		function nupud(X,Y) {
			var canvas=document.getElementById("nupud");
			var context=canvas.getContext("2d");
			
			var startX=X;
			var startY=Y;
					 
			context.beginPath();
			context.moveTo(startX,startY);
			context.lineTo(startX+100,startY);
			context.arc(startX+100,startY+25,25,Math.PI*1.5,Math.PI*2,false);
			context.lineTo(startX+125,startY+35);
			context.arc(startX+100,startY+35,25,Math.PI*2,Math.PI*0.5,false);
			context.lineTo(startX,startY+60);
			context.arc(startX,startY+35,25,Math.PI*0.5,Math.PI*1,false);
			context.lineTo(startX-25,startY+25);
			context.arc(startX,startY+25,25,Math.PI*1,Math.PI*1.5,false);
		
			context.fillStyle="#CCFFFF";
			context.fill();
			context.lineWidth=5;
			context.strokeStyle="#3399FF";
			context.stroke();
		}
		function tekst(text,X,Y) {
			var canvas=document.getElementById("tekst");
			var context=canvas.getContext("2d");
			
			var algX=X;
			var algY=Y;
			var nuppText=text;
			
			context.font="16px Calibri";
			context.textAlign="center";
			context.fillText(nuppText,algX,algY);	
		}
		function playerData() {
			var canvas=document.getElementById("playerData");
			var context=canvas.getContext("2d");
			
			var topLeftCornerX = 1000;
			var topLeftCornerY = 10;
			var width = 250;
			var height = 200;
		 
			context.beginPath();
			context.rect(topLeftCornerX,topLeftCornerY,width,height);
		 
			context.fillStyle="#FFFFCC";
			context.fill();
			context.lineWidth=5;
			context.strokeStyle="black"; 
			context.stroke();
		}
		function chatBox() {
			var canvas=document.getElementById("chatBox");
			var context=canvas.getContext("2d");
			
			var topLeftCornerX = 1000;
			var topLeftCornerY = 220;
			var width = 250;
			var height = 460;
		 
			context.beginPath();
			context.rect(topLeftCornerX,topLeftCornerY,width,height);
		 
			context.fillStyle="#ffff99";
			context.fill();
			context.lineWidth=5;
			context.strokeStyle="black"; 
			context.stroke();
		}
		function poker() {
			bg();
			laud();
			kaardid();
			POT();
			players();
			nupud(100,600);
			nupud(300,600);
			nupud(500,600);
			nupud(700,600);
			tekst("POT:",450,45);
			tekst("FOLD",150,635);
			tekst("CHECK/CALL",350,635);
			tekst("RAISE", 550,635);
			tekst("ALL-IN", 750,635);
			playerData();
			chatBox();
		}
		</script> 
	<title>Texas Hold'em Limit</title>
</head>
<body onload="poker()">
	<div style="position:relative;">
		<canvas id="bg" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:0;"></canvas>
		<canvas id="laud" width=1280px height=700px style="position: absolute; left:0; top:0; z-index:1;"></canvas>
		<canvas id="kaardid" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:2;"></canvas>
		<canvas id="POT" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:3;">POT:</canvas>
		<canvas id="players" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:4;"></canvas>
		<canvas id="nupud" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:5;"></canvas>
		<canvas id="tekst" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:6;"></canvas>	
		<canvas id="playerData" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:7;"></canvas>
		<canvas id="chatBox" width=1280px height=700px style="position:absolute; left:0; top:0; z-index:8;"></canvas>
	</div>
</body>
</html>